{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block page_content %}

<table class="table table-hover">
    <thead>
        <th class="active">No</th>
        <th class="active">描述</th>
        <th class="active">是否完成</th>
        <th class="active">创建时间</th>
        <th class='active'>操作</th> 
    </thead>
    <tbody>
        {% for todo in todolists %}

            <!-- tr -->
            {% if todo.status %} <tr class="success">
            {% else %} <tr class="info"> {% endif %}
                <td>{{ loop.index }}</td>
                <td>{{ todo.title }}</td>
                <td>{{ todo.status }}</td>
                <td>{{ todo.create_time }}</td>
                <td>
                    {% if todo.status %}
                    <a href="{{ url_for('todolist.delete_todo_list', id=todo.id) }}" class="btn btn-danger" role ="button">删除</a>
                    {% else %}
                    <a href="{{ url_for('todolist.change_todo_list', id=todo.id) }}" class="btn btn-success" role ="button">修改</a>
                    {% endif %}
                </td>

            </tr>
        {% endfor %}

    </tbody>
</table>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> ADD </button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog"> <div class="modal-content">

      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel" align="center">add new todo list</h4>
      </div>

      <div class="modal-body">
          <div class="row">
              <div class="col-md-8 col-md-offset-2"> {{ wtf.quick_form(form, form_type="horizontal") }} </div>
          </div>
      </div> <!-- modal body -->

    </div> </div>
</div>


{% endblock %}
